<template>
  <view class="home">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-bar">
        <image class="header-logo" src="https://www.enkilife.cn/themes/default/assets2024/logo.png" mode="heightFix" />
        <view class="header-menu" @click="showMenu = true">
          <view class="menu-bar"></view>
          <view class="menu-bar"></view>
          <view class="menu-bar"></view>
        </view>
      </view>
     <view class="search-row" style="position:relative;">
            <div class="search-category-select-wrapper">
              <select class="search-category" v-model="searchCategory">
                <option value="all">全部分类</option>
                <option value="product">产品</option>
                <option value="page">单页</option>
                <option value="article">文章</option>
              </select>
              <span class="select-arrow">▼</span>
            </div>
            <input class="search-input" placeholder="请输入货号/产品关键词" v-model="searchValue" @focus="showCharPicker = true" @blur="onInputBlur" />
            <button class="search-btn">
              <svg class="search-icon" viewBox="0 0 24 24" width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/>
                <line x1="16.3" y1="16.3" x2="21" y2="21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </button>
            <view v-if="showCharPicker" class="char-picker-popup" @mousedown.prevent>
              <view class="char-picker-header">
                <view class="char-picker-title">插入特殊字符:</view>
                <view class="char-picker-content-right">
                  <view class="char-picker-row">
                    <text
                      v-for="(char, ci) in specialChars"
                      :key="char"
                      class="char-picker-char"
                      @click="insertChar(char)"
                    >{{ char }}</text>
                  </view>
                  <view class="char-picker-close" @click="showCharPicker = false">收起↑</view>
                </view>
              </view>
            </view>
          </view>


      <view v-if="showImagePicker" class="image-picker">
        <view v-for="img in imageList" :key="img.name" class="image-picker-item" @click="insertImageName(img.name)">
          <image :src="img.src" class="picker-img" mode="aspectFill" />
          <view class="picker-label">{{ img.name }}</view>
        </view>
        <view class="picker-close" @click="showImagePicker = false">收起 ↑</view>
      </view>
    </view>
    <!-- 多级弹出导航菜单 -->
    <view v-if="showMenu" class="nav-menu-mask" @click="showMenu = false">
      <view class="nav-menu" @click.stop>
        <view class="nav-menu-close" @click="showMenu = false">×</view>
        <template v-for="(item, i) in menuList">
          <view class="nav-menu-item" :key="item.name">
            <view class="nav-menu-main" @click="toggleMenu(i)">
              <text>{{ item.name }}</text>
              <text v-if="item.children" class="arrow">{{ openMenuIndex === i ? '▲' : '▼' }}</text>
            </view>
            <view v-if="item.children && openMenuIndex === i" class="nav-sub-menu">
              <template v-for="(sub, j) in item.children">
                <view class="nav-sub-menu-item" :key="sub.name">
                  <view class="nav-menu-main" @click.stop="toggleSubMenu(j)">
                    <text>{{ sub.name }}</text>
                    <text v-if="sub.children" class="arrow">{{ openSubMenuIndex === j ? '▲' : '▼' }}</text>
                  </view>
                  <view v-if="sub.children && openSubMenuIndex === j" class="nav-third-menu">
                    <view class="nav-third-menu-item" v-for="third in sub.children" :key="third.name" @click="onMenuClick(third.name)">{{ third.name }}</view>
                  </view>
                  <view v-else-if="!sub.children" class="nav-third-menu-item" @click="onMenuClick(sub.name)">{{ sub.name }}</view>
                </view>
              </template>
            </view>
          </view>
        </template>
      </view>
    </view>

		<zk-swiper :list="bannerList" :height="500" :indicator="true" :autoplay="true" :interval="3000" :circular="true"
			:show-title="true" />

	<view  class="grid   b-radius-10  margin-b12" :class="getMuNum(gridList.length)==5?'grid-c-5':'grid-c-4'">
								<view @click="cGo(item)" v-for="(item,idx) in gridList"  :key="idx" class="">
									<view class="h-80 flex f-a-c f-j-c"  >
										<image class="w-55 h-55" style="height:55px;border-radius: 25px; " :src="item.image " mode="aspectFill"></image>
									</view>
									<text class="f12-size t-color-9  flex f-a-c f-j-c">{{item.title}}</text>

								</view>

</view>



<div style="max-width: 400px; margin: 0 auto; font-family: '微软雅黑', Arial, sans-serif; background: #f8fafc; padding: 20px;">
  <div style="text-align: center; margin-bottom: 24px;">
    <h2 style="font-size: 2em; font-weight: bold; margin: 0 0 12px 0;">关于Enkilife</h2>
    <div style="color: #333; font-size: 1.1em; line-height: 1.6;">
      专注细胞生物学和免疫学科研试剂的研发、生产与销售的生物技术企业
    </div>
  </div>
  <div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); padding: 24px;">
    <div style="font-size: 1.3em; font-weight: bold; color: #e4393c; margin-bottom: 12px;">企业概况</div>
    <div style="color: #333; font-size: 1em; line-height: 1.8;;text-indent: 2rem;">
      武汉恩玑生命科技有限公司（EnkiLife）是一家深耕生命科学，专注细胞生物学和免疫学科研试剂的研发、生产与销售的生物技术企业，在全球100多个国家和地区开展业务，致力于为科研工作者提供高质量的产品和卓越的客户服务，推动生命科学的发展。
		</div>
		<div style="color: #333; font-size: 1.1em; line-height: 1.6;text-indent: 2rem;">
		  EnkiLife的产品线涵盖细胞系、原代细胞、细胞培养基、血清、细胞检测试剂盒、重组靶点蛋白、细胞因子、重组抗体、ELISA试剂盒、生化试剂盒等，并提供技术服务与定制开发，覆盖了生命科学研究的各大关键领域，包括细胞生物学、癌症、免疫学、神经科学、心血管疾病、干细胞、表观遗传学、内分泌、蛋白质组学、代谢组学等，全方位满足您的实验需求，让您享受科研的乐趣！
		</div>


  </div>
</div>

<!-- 发展历程 -->
<div style="max-width: 400px; margin: 24px auto 0 auto; font-family: '微软雅黑', Arial, sans-serif;">
  <div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); padding: 24px; margin-bottom: 24px;">
    <div style="font-size: 1.1em; font-weight: bold; color: #e4393c; margin-bottom: 16px;">发展历程</div>
    <div style="display: flex; align-items: flex-start; margin-bottom: 16px;">
      <div style="background: #e6f7ff; color: #e4393c; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; margin-right: 16px;">2008</div>
      <div>
        <div style="font-weight: bold;">公司成立</div>
        <div style="color: #666;">专注生命科学领域的代理</div>
      </div>
    </div>
    <div style="display: flex; align-items: flex-start; margin-bottom: 16px;">
      <div style="background: #e6f7ff; color: #e4393c; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; margin-right: 16px;">2016</div>
      <div>
        <div style="font-weight: bold;">业务拓展</div>
        <div style="color: #666;">增加试剂及服务业务</div>
      </div>
    </div>
    <div style="display: flex; align-items: flex-start;">
      <div style="background: #e6f7ff; color: #e4393c; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; margin-right: 16px;">2024</div>
      <div>
        <div style="font-weight: bold;">持续发展</div>
        <div style="color: #666;">成为行业知名服务商</div>
      </div>
    </div>
  </div>

  <!-- 企业优势（完全还原图片样式） -->
<div style="max-width: 400px; margin: 24px auto 0 auto; font-family: '微软雅黑', Arial, sans-serif;">
  <div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); padding: 24px 0 24px 0; margin-bottom: 24px;">
    <div style="font-size: 1.1em; font-weight: bold; color: #e4393c; margin-bottom: 16px; text-align: left; padding-left: 24px;">
      企业优势
    </div>
    <div style="display: flex; flex-direction: column; align-items: center;">
      <!-- 公司实力 -->
      <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 32px;">
        <div style="background: #e4393c; border-radius: 16px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
          <!-- 楼宇/实力图标（SVG） -->
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <rect x="8" y="6" width="16" height="20" rx="2" fill="#fff"/>
            <rect x="12" y="10" width="2" height="2" rx="1" fill="#e4393c"/>
            <rect x="18" y="10" width="2" height="2" rx="1" fill="#e4393c"/>
            <rect x="12" y="14" width="2" height="2" rx="1" fill="#e4393c"/>
            <rect x="18" y="14" width="2" height="2" rx="1" fill="#e4393c"/>
            <rect x="12" y="18" width="2" height="2" rx="1" fill="#e4393c"/>
            <rect x="18" y="18" width="2" height="2" rx="1" fill="#e4393c"/>
          </svg>
        </div>
        <div style="font-weight: bold; color: #222; font-size: 1.1em; margin-bottom: 6px;">公司实力</div>
        <div style="color: #444; font-size: 0.98em; text-align: center; line-height: 1.6; max-width: 260px;">
          成立于2008年，专注生命科学领域15年，是国家高新技术企业
        </div>
      </div>
      <!-- 专业团队 -->
      <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 32px;">
        <div style="background: #e4393c; border-radius: 16px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
          <!-- 团队/目标图标（SVG） -->
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <circle cx="16" cy="16" r="12" fill="#fff"/>
            <circle cx="16" cy="16" r="6" fill="#e4393c"/>
            <circle cx="16" cy="16" r="2" fill="#fff"/>
          </svg>
        </div>
        <div style="font-weight: bold; color: #222; font-size: 1.1em; margin-bottom: 6px;">专业团队</div>
        <div style="color: #444; font-size: 0.98em; text-align: center; line-height: 1.6; max-width: 260px;">
          拥有100+专业技术人员，博士硕士占比超过60%
        </div>
      </div>
      <!-- 质量保证 -->
      <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 32px;">
        <div style="background: #e4393c; border-radius: 16px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
          <!-- 质量/眼睛图标（SVG） -->
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <ellipse cx="16" cy="16" rx="12" ry="8" fill="#fff"/>
            <ellipse cx="16" cy="16" rx="5" ry="3.5" fill="#e4393c"/>
            <circle cx="16" cy="16" r="1.5" fill="#fff"/>
          </svg>
        </div>
        <div style="font-weight: bold; color: #222; font-size: 1.1em; margin-bottom: 6px;">质量保证</div>
        <div style="color: #444; font-size: 0.98em; text-align: center; line-height: 1.6; max-width: 260px;">
          通过ISO9001质量管理体系认证，产品质量稳定可靠
        </div>
      </div>
      <!-- 服务承诺 -->
      <div style="display: flex; flex-direction: column; align-items: center;">
        <div style="background: #e4393c; border-radius: 16px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
          <!-- 服务/对勾图标（SVG） -->
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <rect x="6" y="6" width="20" height="20" rx="10" fill="#fff"/>
            <path d="M11 17l4 4 6-8" stroke="#e4393c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div style="font-weight: bold; color: #222; font-size: 1.1em; margin-bottom: 6px;">服务承诺</div>
        <div style="color: #444; font-size: 0.98em; text-align: center; line-height: 1.6; max-width: 260px;">
          7×24小时技术支持，完善的售前售后服务体系
        </div>
      </div>
    </div>
  </div>
</div>

  <!-- 企业文化 -->
  <div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); padding: 24px; margin-bottom: 24px;">
    <div style="font-size: 1.3em; font-weight: bold; color: #e4393c; margin-bottom: 16px;">企业文化</div>
    <div style="color: #333; font-size: 1em; line-height: 1.8;">
      <b>使命</b><br>
      为全球科学研究提供优质产品和专业服务，推动科学进步和创新<br><br>
      <b>愿景</b><br>
      成为生命科学领域值得信赖的服务商和产品供应商<br><br>
      <b>价值观</b><br>
      专业、创新、诚信、服务，客户的满意是我们的核心价值
    </div>
  </div>

  <!-- 了解更多按钮 -->
  <div style="text-align: center; margin-bottom: 32px;">
    <button style="background: #e4393c; color: #fff; border: none; border-radius: 24px; font-size: 1.1em; font-weight: bold; cursor: pointer;">
      了解更多 &rarr;
    </button>
  </div>
</div>

<!-- 统计数据区块（红黑风格） -->
<div style="
  max-width: 400px;
  margin: 32px auto 0 auto;
  background: linear-gradient(135deg, #e4393c 0%, #b71c1c 100%);
  border-radius: 6px;
  box-sizing: border-box;
  padding: 36px 0 36px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
">
  <div style="width: 90%; display: flex; flex-wrap: wrap; justify-content: space-between;">
    <!-- 产品种类 -->
    <div style="width: 48%; text-align: center; margin-bottom: 32px;">
      <div style="margin-bottom: 8px;">
        <!-- 显微镜图标 -->
        <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
          <path d="M10 28h16M18 24v-7M24 17a6 6 0 1 0-12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
          <path d="M14 10V7a4 4 0 1 1 8 0v3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </div>
      <div style="font-size: 2em; font-weight: bold; letter-spacing: 1px;">10000+</div>
      <div style="font-size: 1.1em; margin-top: 2px;">产品种类</div>
    </div>
    <!-- 服务客户 -->
    <div style="width: 48%; text-align: center; margin-bottom: 32px;">
      <div style="margin-bottom: 8px;">
        <!-- 客户/用户图标 -->
        <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
          <circle cx="18" cy="13" r="5" stroke="#fff" stroke-width="2"/>
          <path d="M8 29c0-4.418 4.03-8 9-8s9 3.582 9 8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </div>
      <div style="font-size: 2em; font-weight: bold; letter-spacing: 1px;">5000+</div>
      <div style="font-size: 1.1em; margin-top: 2px;">服务客户</div>
    </div>
    <!-- 合作品牌 -->
    <div style="width: 48%; text-align: center;">
      <div style="margin-bottom: 8px;">
        <!-- 地球/品牌图标 -->
        <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
          <circle cx="18" cy="18" r="13" stroke="#fff" stroke-width="2"/>
          <ellipse cx="18" cy="18" rx="13" ry="5" stroke="#fff" stroke-width="2"/>
          <path d="M18 5v26" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </div>
      <div style="font-size: 2em; font-weight: bold; letter-spacing: 1px;">50+</div>
      <div style="font-size: 1.1em; margin-top: 2px;">合作品牌</div>
    </div>
    <!-- 服务年限 -->
    <div style="width: 48%; text-align: center;">
      <div style="margin-bottom: 8px;">
        <!-- 奖牌/年限图标 -->
        <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
          <circle cx="18" cy="15" r="7" stroke="#fff" stroke-width="2"/>
          <path d="M18 22v7M18 29l-3-3M18 29l3-3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </div>
      <div style="font-size: 2em; font-weight: bold; letter-spacing: 1px;">15+</div>
      <div style="font-size: 1.1em; margin-top: 2px;">服务年限</div>
    </div>
  </div>
</div>

<!-- 合作品牌区块（红黑风格） -->
<div style="max-width: 400px; margin: 40px auto 0 auto; font-family: '微软雅黑', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 18px;">
    <div style="font-size: 2.2em; font-weight: bold; color: #e4393c; margin-bottom: 10px;">合作品牌</div>
    <div style="color: #444; font-size: 1.2em; margin-bottom: 10px;">与全球知名品牌深度合作</div>
  </div>
  <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
    <!-- 第一行 -->
    <div style="width: 48%; margin-bottom: 32px; display: flex; flex-direction: column; align-items: center;">
      <div style="background: #fff5f5; border-radius: 16px; width: 110px; height: 70px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; color: #000; margin-bottom: 10px;">Abcam</div>
      <div style="color: #444; font-size: 1em;">Abcam</div>
    </div>
    <div style="width: 48%; margin-bottom: 32px; display: flex; flex-direction: column; align-items: center;">
      <div style="background: #fff5f5; border-radius: 16px; width: 110px; height: 70px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; color: #000; margin-bottom: 10px;">CST</div>
      <div style="color: #444; font-size: 1em;">CST</div>
    </div>
    <!-- 第二行 -->
    <div style="width: 48%; margin-bottom: 32px; display: flex; flex-direction: column; align-items: center;">
      <div style="background: #fff5f5; border-radius: 16px; width: 110px; height: 70px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; color: #000; margin-bottom: 10px;">Santa Cruz</div>
      <div style="color: #444; font-size: 1em;">Santa Cruz</div>
    </div>
    <div style="width: 48%; margin-bottom: 32px; display: flex; flex-direction: column; align-items: center;">
      <div style="background: #fff5f5; border-radius: 16px; width: 110px; height: 70px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; color: #000; margin-bottom: 10px;">Sigma</div>
      <div style="color: #444; font-size: 1em;">Sigma</div>
    </div>
    <!-- 第三行 -->
    <div style="width: 48%; margin-bottom: 0; display: flex; flex-direction: column; align-items: center;">
      <div style="background: #fff5f5; border-radius: 16px; width: 110px; height: 70px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; color: #000; margin-bottom: 10px;">Thermo</div>
      <div style="color: #444; font-size: 1em;">Thermo</div>
    </div>
    <div style="width: 48%; margin-bottom: 0; display: flex; flex-direction: column; align-items: center;">
      <div style="background: #fff5f5; border-radius: 16px; width: 110px; height: 70px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; color: #000; margin-bottom: 10px;">BD</div>
      <div style="color: #444; font-size: 1em;">BD</div>
    </div>
  </div>
</div>


    <!-- 产品精选区块 -->
   <!-- <view class="section product-section">
      <view class="section-title-row">
        <view class="section-title">产品精选</view>
        <view class="section-subtitle">Selected Products</view>
      </view>
      <view class="product-list">
        <view class="product-item">
          <image src="/static/images/selected-1.jpg" class="product-img" mode="aspectFill" />
          <view class="product-name">流式细胞术抗体与试剂</view>
        </view>
        <view class="product-item">
          <image src="/static/images/selected-2.jpg" class="product-img" mode="aspectFill" />
          <view class="product-name">免疫测定试剂盒与试剂</view>
        </view>
        <view class="product-item">
          <image src="/static/images/selected-3.jpg" class="product-img" mode="aspectFill" />
          <view class="product-name">细胞功能与代谢检测</view>
        </view>
        <view class="product-item" style="opacity:0;pointer-events:none"></view>
      </view>
    </view> -->
    <!-- 热门资讯区块 -->
   <!-- <view class="section news-section">
      <view class="section-title-row">
        <view class="section-title">热门资讯</view>
        <view class="section-subtitle">Hot News</view>
      </view>
      <view class="news-tabs">
        <view class="news-tab active">新品速递</view>
        <view class="news-tab">促销活动</view>
        <view class="news-tab">公司新闻</view>
      </view>
      <view class="news-list">
        <view class="news-item">
          <text class="news-title">三种流式荧光染料上新 Elab Bright™ Violet 421/510/650</text>
          <text class="news-date">2025-07-09</text>
        </view>
        <view class="news-item">
          <text class="news-title">Caspase 9 活酶流式法检测助力细胞凋亡研究</text>
          <text class="news-date">2025-07-09</text>
        </view>
        <view class="news-item">
          <text class="news-title">Elabscience 新品推荐语音亮度ELISPO试剂盒，免疫检测神器</text>
          <text class="news-date">2025-06-26</text>
        </view>
      </view>
    </view> -->
    <!-- 特色推荐区块 -->
  <!--  <view class="section featured-section">
      <view class="section-title-row">
        <view class="section-title">特色推荐</view>
        <view class="section-subtitle">Featured Recommendations</view>
      </view>
      <view class="feature-tabs">
        <view class="feature-tab active">流式技术</view>
        <view class="feature-tab">客户评审</view>
      </view>
      <view class="feature-content">
        <view class="feature-box">
          <view class="feature-box-title">常见免疫细胞分型</view>
          <view class="feature-box-list">
            <view>• T/B/NK细胞群检测</view>
            <view>• CD4+/CD8+T细胞亚群检测</view>
            <view>• Treg细胞群检测</view>
            <view>• Th1/Th2/Th17细胞群检测</view>
          </view>
          <view class="feature-box-link">点击查看详情</view>
        </view>
        <view class="feature-card">
          <view class="feature-card-header">
            <text class="feature-card-logo">Elabscience<text class="reg">®</text></text>
            <view class="feature-card-title">流式讲堂</view>
          </view>
          <image src="/static/images/feature_lskt-new.png" class="feature-card-img" mode="aspectFill" />
          <view class="feature-card-list">
            <view>高分文献秘籍-细胞毒性T细胞介导的细胞凋亡解决方案</view>
            <view>流式课堂 | 精准解析小鼠T细胞状态</view>
            <view>流式课堂 | 免疫系统的"特种兵"：效应CD8+T细胞</view>
          </view>
          <button class="feature-card-btn">查看更多</button>
        </view>
        <view class="feature-card">
          <view class="feature-card-header">
            <text class="feature-card-logo">Elabscience<text class="reg">®</text></text>
            <view class="feature-card-title">流式实验指南与答疑</view>
          </view>
          <image src="/static/images/feature_syzn-new.png" class="feature-card-img" mode="aspectFill" />
          <view class="feature-card-list">
            <view>流式细胞术实验流程</view>
            <view>流式实验常见问题及解决方案</view>
            <view>流式配色基本原则</view>
          </view>
          <button class="feature-card-btn">查看更多</button>
        </view>
      </view>
    </view> -->
    <!-- 底部栏 -->

		<view class="footer">
			<zk-theme type="card" margin="20">
					<view class="" style="height: 1rpx;"></view>
					<!-- <zk-text text="联系我们" :size="40" bold align="center" margin="40rpx" /> -->
					<zk-theme type="card1" margin="20" padding="20">
						<zk-text text="总部信息" :size="34" bold margin="0 0 24rpx 0" />
						<view class="info-item flex">
							<zk-text text="地址：" type="secondary" :size="30" />
							<zk-text :text="headquarters.address" :size="30" />
						</view>
						<view class="info-item flex">
							<zk-text text="电话：" type="secondary" :size="30" />
							<zk-text :text="headquarters.phone" :size="30" />
						</view>
						<view class="info-item flex">
							<zk-text text="营业时间：" type="secondary" :size="30" />
							<zk-text :text="headquarters.businessHours" :size="30" />
						</view>
					</zk-theme>
				</zk-theme>
			<view class="footer-qrcodes">
			  <view class="qrcode-box">
			    <image src="/static/images/jifen1.png" class="qrcode-img" mode="aspectFill" />
			    <view class="qrcode-label">积分兑换</view>
			  </view>
			  <view class="qrcode-box">
			    <image src="/static/images/code2.jpg" class="qrcode-img" mode="aspectFill" />
			    <view class="qrcode-label">微信公众号</view>
			  </view>
			</view>

		  <view class="footer-company">
		 <!--   <view>© 2009-2025 武汉伊莱瑞斯特生物科技股份有限公司</view>
		    <view>公司地址略</view> -->
		    <view>备案号 鄂ICP备18003807号</view>
		    <view>备案号 42018502003602号</view>
		  </view>

		  <view class="footer-nav">
		    <view class="footer-nav-item">首页</view>
		    <view class="footer-nav-item">电话</view>
		    <view class="footer-nav-item">联系我们</view>
		    <view class="footer-nav-item">微信咨询</view>
		  </view>
		</view>
  </view>
</template>

<script>
import rfItemPopup from '@/components/rf-item-popup';

export default {
  components: {
    rfItemPopup
  },
  data() {
    return {
      showMenu: false,
      openMenuIndex: null,
      openSubMenuIndex: null,
      searchValue: '',
      showCharPicker: false,
      specialChars: [
        'α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'κ', 'μ', 'ω', 'σ', 'τ', 'λ',
        'Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ', 'Ⅷ', 'Ⅸ', 'Ⅹ', 'Ⅺ',
        'Ⅻ', 'X Ⅲ', 'X Ⅳ', 'X Ⅴ', 'X Ⅵ', 'X Ⅶ', 'X Ⅷ'
      ],
      searchCategory: 'product',

				gridList: [{
							title: '品牌故事',
							image: '/static/address/3.jpg',
							link: '/static/food/4.jpg'
							},
							{
								title: '全部产品',
													image: '/static/address/3.jpg',
													link: '/pages/product/list'
							},
							{
							title: '促销活动',
												image: '/static/address/3.jpg',
												link: '/static/food/4.jpg'
							},
							{
								title: '联系我们',
													image: '/static/address/3.jpg',
													link: '/static/food/4.jpg'
							}
						],

      menuList: [
        {
          name: '首页',
        },
        {
          name: '产品中心',
          children: [
            {
              name: '流式抗体',
              children: [
                { name: '小鼠流式抗体' },
                { name: '人流式抗体' },
                { name: '兔流式抗体' }
              ]
            },
            {
              name: 'ELISA试剂盒',
              children: [
                { name: '人ELISA' },
                { name: '小鼠ELISA' },
                { name: '大鼠ELISA' }
              ]
            },
            { name: '细胞功能检测试剂盒' }
          ]
        },
        {
          name: '服务支持',
          children: [
            { name: '技术支持' },
            { name: '资料下载' },
            { name: '常见问题' }
          ]
        },
        {
          name: '关于我们',
          children: [
            { name: '公司简介' },
            { name: '联系我们' },
            { name: '加入我们' }
          ]
        }
      ],
      imageList: [
        { src: '/static/images/pic1.png', name: '图片1' },
        { src: '/static/images/pic2.png', name: '图片2' },
        { src: '/static/images/pic3.png', name: '图片3' }
      ],



			bannerList: [{
					image: '/static/address/1.jpg',
					title: '加入我们的大家庭 - 携手共创辉煌未来'
				},
				{
					image: '/static/address/2.jpg',
					title: '20年品牌沉淀 - 数千家门店的选择'
				},
				{
					image: '/static/address/3.jpg',
					title: ''
				}
			],
			investmentInfo: [{
					value: '15-30万',
					label: '投资金额'
				},
				{
					value: '20-40㎡',
					label: '店面面积'
				},
				{
					value: '3-6个月',
					label: '回本周期'
				},
				{
					value: '40%-50%',
					label: '利润率'
				}
			],
			specialDishes: [{
					name: '红烧狮子头',
					price: '68',
					image: '/static/food/1.jpg'
				},
				{
					name: '清蒸鲈鱼',
					price: '88',
					image: '/static/food/2.jpg'
				},
				{
					name: '北京烤鸭',
					price: '128',
					image: '/static/food/3.jpg'
				},
				{
					name: '宫保鸡丁',
					price: '48',
					image: '/static/food/4.jpg'
				}
			],

			headquarters: {
				address: '上海市浦东新区陆家嘴西路168号',
				phone: '021-12345678',
				businessHours: '周一至周日 10:00-22:00'
			},
			stores: [{
					name: '静安寺店',
					address: '上海市静安区南京西路1686号',
					phone: '021-87654321',
					businessHours: '周一至周日 10:00-22:00'
				},
				{
					name: '徐家汇店',
					address: '上海市徐汇区虹桥路1号',
					phone: '021-98765432',
					businessHours: '周一至周日 10:00-22:00'
				},
				{
					name: '五角场店',
					address: '上海市杨浦区政立路489号',
					phone: '021-23456789',
					businessHours: '周一至周日 10:00-22:00'
				}
			],
			showAttrPopup: false,
      product: {
        base_attribute_format: []
      }
    }
  },
  methods: {
		getMuNum(len) {
			if(len%5 ==0){
				return 5
			}else{
				return 4
			}

		},
    toggleMenu(i) {
      if (this.openMenuIndex === i) {
        this.openMenuIndex = null;
        this.openSubMenuIndex = null;
      } else {
        this.openMenuIndex = i;
        this.openSubMenuIndex = null;
      }
    },
    toggleSubMenu(j) {
      if (this.openSubMenuIndex === j) {
        this.openSubMenuIndex = null;
      } else {
        this.openSubMenuIndex = j;
      }
    },
    onMenuClick(name) {
      this.showMenu = false;
      this.openMenuIndex = null;
      this.openSubMenuIndex = null;
      // 可在此处处理菜单跳转逻辑
      // uni.navigateTo({ url: ... })
    },
    insertImageName(name) {
      this.searchValue += name;
      // this.showImagePicker = false;
    },
    insertChar(char) {
      this.searchValue += char;
      // this.showCharPicker = false;
    },
    onInputBlur() {
      setTimeout(() => {
        this.showCharPicker = false;
      }, 100);
    },
    // 在methods中添加跳转方法
    goToAllProducts() {
      uni.navigateTo({ url: '/pages/product/index' });
    },
    cGo(item) {
      console.log(item.link)
      if (item.link) {
        // 判断是否为tabBar页面
        if (item.link === '/pages/product/list') {
          uni.switchTab({ url: item.link });
        } else {
          uni.navigateTo({ url: item.link });
        }
        return;
      }
      // 原有逻辑（如有其它跳转或处理）
      // ...
    },
  }
}
</script>

<style scoped>

.header { background: #fff; padding-bottom: 0; }
.header-bar { display: flex; justify-content: space-between; align-items: center; padding: 24rpx 24rpx 0 24rpx; }
.header-logo { height: 56px; }
.header-menu { width: 56rpx; height: 56rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.menu-bar { width: 36rpx; height: 5rpx; background: #e53935; margin: 4rpx 0; border-radius: 3rpx; }
.search-row { display: flex; align-items: center; padding: 18rpx 10rpx; background: #fff; border-radius: 16rpx; margin: 20rpx 24rpx 0 24rpx; }
.search-category-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 16rpx;
}
/* search-category-select-wrapper 边框 */
.search-category-select-wrapper {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.search-category {
  background: #fff0f0;
  border-radius: 10rpx;
  padding: 0 38rpx 0 28rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #222;
  font-weight: normal;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.select-arrow {
  position: absolute;
  right: 18rpx;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 22rpx;
  color: #888;
}
.search-input { flex: 1; height: 66rpx; border: none; background: #fff8f8;
   border-radius: 10rpx; padding: 0 18rpx; font-size: 30rpx; margin-right: 14rpx; color: #222; }
/* search-input 边框 */
.search-input {
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
}
.search-input {
  /* 保证输入内容和placeholder都垂直居中 */
  display: flex;
  align-items: center;
}
/* 针对uni-app/微信小程序等环境，若需兼容placeholder垂直居中，可加： */
.search-input::-webkit-input-placeholder {
  line-height: 66rpx;
}
.search-input:-moz-placeholder {
  line-height: 66rpx;
}
.search-input::-moz-placeholder {
  line-height: 66rpx;
}
.search-input:-ms-input-placeholder {
  line-height: 66rpx;
}
.search-btn {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  height: 66rpx;
  width: 80rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12rpx;
}
.search-icon {
  display: block;
  margin: 0 auto;
}

.section { margin: 32rpx 0; background: #fff; border-radius: 18rpx; padding: 32rpx 24rpx; }
.section-title-row {
  display: flex;
  align-items: flex-end;
  gap: 18rpx;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #e53935;
  letter-spacing: 1rpx;
  margin-bottom: 0;
  line-height: 1;
}
.section-subtitle {
  color: #666;
  font-size: 26rpx;
  margin-bottom: 0;
  align-self: flex-end;
  line-height: 1;
  padding-bottom: 2rpx; /* 你可以微调这个值，比如2rpx、3rpx、4rpx，看哪个最齐 */
}
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32rpx;
}
.product-item {
  flex: 0 0 calc(50% - 18rpx);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff8f8;
  border-radius: 14rpx;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 32rpx;
}


.product-item:active { transform: scale(1.03); }
.product-img { width: 180rpx; height: 120rpx; border-radius: 10rpx; margin-bottom: 10rpx; object-fit: cover; }
.product-name { text-align: center; font-size: 28rpx; color: #222; font-weight: 500; }
.news-tabs { display: flex; gap: 20rpx; margin-bottom: 20rpx; }
.news-tab { padding: 10rpx 32rpx; border-radius: 32rpx; background: #fff0f0; color: #222; font-size: 28rpx; font-weight: 500; transition: background 0.2s, color 0.2s; }
.news-tab.active { background: #e53935; color: #fff; }
.news-list { }
.news-item { display: flex; flex-direction: column; padding: 16rpx 0; border-bottom: 1px solid #f5c6c6; }
.news-title { font-size: 30rpx; font-weight: 500; color: #222; }
.news-date { color: #666; font-size: 24rpx; }
.feature-tabs { display: flex; gap: 20rpx; margin-bottom: 20rpx; }
.feature-tab { padding: 10rpx 40rpx; border-radius: 12rpx 12rpx 0 0; background: #fff0f0; color: #222; font-size: 30rpx; font-weight: 500; }
.feature-tab.active { background: #e53935; color: #fff; }
.feature-content { }
.feature-box { background: linear-gradient(90deg, #fff0f0 60%, #fff 100%); border-radius: 12rpx; padding: 28rpx; margin-bottom: 28rpx; }
.feature-box-title { font-size: 30rpx; font-weight: bold; margin-bottom: 14rpx; color: #e53935; }
.feature-box-list { color: #fff; background: #222; border-radius: 10rpx; padding: 18rpx; margin-bottom: 10rpx; font-size: 26rpx; }
.feature-box-link { color: #222; text-align: right; font-size: 28rpx; margin-top: 10rpx; }
.feature-card { background: #fff; border-radius: 12rpx; margin-bottom: 18rpx; padding: 18rpx; transition: box-shadow 0.2s; }
.feature-card:active { }
.feature-card-header { display: flex; align-items: center; gap: 14rpx; }
.feature-card-logo { font-size: 30rpx; color: #e53935; font-weight: bold; }
.feature-card-title { font-size: 30rpx; font-weight: bold; color: #e53935; }
.feature-card-img { width: 100%; height: 130rpx; border-radius: 10rpx; margin: 14rpx 0; object-fit: cover; }
.feature-card-list { font-size: 26rpx; color: #333; margin-bottom: 10rpx; }
.feature-card-btn { background: #222; color: #fff; border: none; border-radius: 10rpx; padding: 10rpx 36rpx; font-size: 28rpx; }
.footer { background: #fff; border-radius: 18rpx 18rpx 0 0; margin-top: 40rpx; padding: 32rpx 0 0 0; }
.footer-company { color: #666; font-size: 24rpx; text-align: center; margin-bottom: 18rpx; }
.footer-qrcodes { display: flex; justify-content: center; gap: 56rpx; margin-bottom: 18rpx; }
.qrcode-box { display: flex; flex-direction: column; align-items: center; }
.qrcode-img { width: 120rpx; height: 120rpx; border-radius: 10rpx; background: #fff0f0; }
.qrcode-label { font-size: 24rpx; color: #666; margin-top: 6rpx; }
.footer-nav { display: flex; justify-content: space-around; background: #e53935; border-radius: 0 0 18rpx 18rpx; padding: 18rpx 0; }
.footer-nav-item { color: #fff; font-size: 30rpx; font-weight: 500; }
.nav-menu-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  display: flex;
  justify-content: flex-end;
}
.nav-menu {
  width: 400rpx;
  background: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 60rpx 0 0 0;
  overflow-y: auto;
  position: relative;
}
.nav-menu-close {
  position: absolute;
  top: 18rpx;
  right: 24rpx;
  font-size: 48rpx;
  color: #888;
  z-index: 10;
  width: 48rpx;
  height: 48rpx;
  line-height: 48rpx;
  text-align: center;
  border-radius: 50%;
  background: #f5f5f5;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.nav-menu-close:active {
  background: #e53935;
  color: #fff;
}
.nav-menu-item {
  border-bottom: 1rpx solid #f0f0f0;
}
.nav-menu-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 48rpx;
  font-size: 32rpx;
  color: #222;
  cursor: pointer;
}
.arrow {
  font-size: 28rpx;
  color: #e53935;
  margin-left: 12rpx;
}
.nav-sub-menu {
  background: #fafafa;
}
.nav-sub-menu-item {
  border-bottom: 1rpx solid #f0f0f0;
}
.nav-third-menu {
  background: #f5f5f5;
}
.nav-third-menu-item {
  padding: 28rpx 72rpx;
  font-size: 28rpx;
  color: #333;
  cursor: pointer;
}
.nav-third-menu-item:active {
  background: #f7f7f7;
}
.product-item:nth-child(2n+1):last-child {
  flex-basis: 100%;
  max-width: 100%;
}
.image-picker {
  display: flex;
  gap: 16rpx;
  background: #fff;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 12rpx;
  margin: 0 24rpx 16rpx 24rpx;
  flex-wrap: wrap;
  align-items: center;
}
.image-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-right: 12rpx;
}
.picker-img {
  width: 48rpx;
  height: 48rpx;
  border-radius: 6rpx;
  margin-bottom: 4rpx;
}
.picker-label {
  font-size: 22rpx;
  color: #333;
}
.picker-close {
  color: #e53935;
  font-size: 26rpx;
  margin-left: 16rpx;
  cursor: pointer;
}
.char-picker-popup {
  position: absolute;
  left: 0;
  right: 0;
  top: 80rpx;
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.12);
  z-index: 1000;
  padding: 18rpx 24rpx 12rpx 24rpx;
  margin: 0 0 0 0;
}
.char-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.char-picker-title {
  color: #888;
  font-size: 26rpx;
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 10rpx;
  line-height: 2;
  height: 40cqw;
  display: flex;
  align-items: flex-start;
}
.char-picker-content-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.char-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 4rpx;
  justify-content: space-between;
}
.char-picker-char {
  color: #1976d2;
  font-size: 30rpx;
  cursor: pointer;
  margin-right: 8rpx;
  transition: color 0.2s;
}
.char-picker-char:active {
  color: #e53935;
}
.char-picker-close {
  color: #e53935;
  font-size: 26rpx;
  margin-top: 8rpx;
  text-align: right;
  cursor: pointer;
}
.attr-btn {
  background: #e4393c;
		color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin: 20rpx 0;
}

.attr-group {
		margin-bottom: 20rpx;
}

.attr-name {
  font-size: 28rpx;
		color: #666;
  margin-bottom: 10rpx;
}

.attr-values {
		display: flex;
  flex-wrap: wrap;
}

.attr-value {
  font-size: 26rpx;
		color: #333;
  margin-right: 20rpx;
		margin-bottom: 10rpx;
  background: #f5f5f5;
  padding: 6rpx 16rpx;
  border-radius: 6rpx;
	}

.no-attr {
  text-align: center;
  color: #999;
		font-size: 28rpx;
  padding: 40rpx 0;
	}
</style>
